<template>
  <view class="work-reminder">
    <view class="px-6 box-border pt-2.5 bg-white">
      <up-input
        v-model="queryParam.workTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择"
        border="none"
        color="#000000"
        placeholderStyle="{color: '#707070'}"
      >
        <template #suffix>
          <view class="pr-1" @click="showTimeSelect = true">
            <up-icon name="arrow-down" color="#000000" size="18"></up-icon>
          </view>
        </template>
      </up-input>
    </view>
    <view class="bg-white">
      <up-tabs
        :list="newsTab"
        lineColor="#0A8CFE"
        lineWidth="70rpx"
        :activeStyle="{ color: '#0A8CFE', fontSize: '29rpx' }"
        :inactiveStyle="{ color: '#000', fontSize: '29rpx' }"
        @click="onTypeItem"
      >
      </up-tabs>
    </view>

    <view class="top-line mt-[-4rpx]"></view>
    <template v-if="list.length">
      <view
        class="bg-white px-6 py-4.5 box-border mb-2.5"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="text-[29rpx] flex flex-col">
          <text class="text-[#000000]">{{ item.workItem }}</text>
          <text class="text-[#8A8A8A] mt-2.75"
            >发布时间：
            {{
              item.createTime
                ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
                : ""
            }}</text
          >
        </view>
      </view>
    </template>
    <up-empty
      v-else
      mode="data"
      text="暂无记录"
      icon="http://cdn.uviewui.com/uview/empty/data.png"
    >
    </up-empty>
    <up-gap height="1"></up-gap>
    <up-datetime-picker
      :show="showTimeSelect"
      v-model="value1"
      mode="year-month"
      format="YYYY年MM月"
      closeOnClickOverlay
      @confirm="selectTime"
      @cancel="showTimeSelect = false"
      @close="showTimeSelect = false"
    >
    </up-datetime-picker>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { listWorkPolice } from "@/api/workTask/index";
import dayjs from "dayjs";

const uToastRef = <any>ref(null);
const data = reactive({
  value1: Number(new Date()),
  queryParam: {
    workTime: dayjs(new Date()).format("YYYY年MM月"),
    readStatus: <any>0, // 0未读 全部传空
  },
  list: <any>[],
});
const { value1, queryParam, list } = toRefs(data);

const showTimeSelect = ref(false);
const newsTab = reactive([{ name: "未阅（0）" }, { name: "全部（0）" }]);
const onTypeItem = (item: any) => {
  if (item.index == 0) {
    queryParam.value.readStatus = 0;
  } else {
    queryParam.value.readStatus = "";
  }
  getWorkTaskList();
};
const selectTime = (item: any) => {
  showTimeSelect.value = false;
  queryParam.value.workTime = dayjs(item.value).format("YYYY年MM月");
  getWorkTaskList();
};
const getWorkTaskList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listWorkPolice(queryParam.value)
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      newsTab[0].name = `未阅（${data.noReadCount}）`;
      newsTab[1].name = `全部（${data.allCount}）`;
      list.value = data.taskList ?? [];
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
onLoad(() => {
  getWorkTaskList();
});
</script>

<style lang="scss" scoped>
.work-reminder {
  ::v-deep .u-input__content {
    border-radius: 14rpx !important;
    border: 0.7rpx solid #707070 !important;
  }
  ::v-deep .u-input__content__field-wrapper__field {
    padding: 10rpx 22rpx;
  }
  /* ::v-deep .u-tabs__wrapper__nav__item-1 {
    width: 270rpx;
  } */
  ::v-deep .u-tabs__wrapper__nav__item {
    width: 50vw;
  }
}
</style>
